<template>
  <div class="contract-list">
    <!-- Tabs Navigation -->

    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div class="tabs-container">
        <el-tabs v-model="queryParams.status" @tab-change="handleQuery" class="contract-tabs">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="我负责的" name="1"></el-tab-pane>
          <el-tab-pane label="我协同的" name="2"></el-tab-pane>
          <!-- <el-tab-pane label="下属负责的" name="subordinateResponsible"></el-tab-pane>
          <el-tab-pane label="下属协同的" name="subordinateCollaborative"></el-tab-pane> -->
        </el-tabs>
        <el-button type="primary" class="new-button" @click="handleAdd">
          <i class="el-icon-plus"></i>
          新建
        </el-button>
      </div>
      <!-- card body -->
      <!-- Statistics Cards -->
      <div class="statistics-row">
        <div class="stat-card" shadow="never" v-for="(stat, index) in statistics" :key="index">
          <div class="stat-content">
            <div class="stat-title">{{ stat.title }}</div>
            <div class="stat-number">{{ stat.number }}</div>
            <div class="stat-amount">{{ stat.amount }}</div>
          </div>
        </div>
      </div>

      <!-- Filter Section -->
      <div class="filter-section">
        <div class="left-filters">
          <el-input @clear="clear('supplier')" @click="showCustomer" style="width: 200px;" v-model="queryParams.supplierName" placeholder="关联客户" size="normal" clearable suffix-icon="ArrowDown"></el-input>
          <el-input @clear="clear('clue')" @click="showClue" style="width: 200px;" v-model="queryParams.clueName" placeholder="关联商机" size="normal" clearable suffix-icon="ArrowDown"></el-input>
        </div>
        <div class="right-filters">
          <el-input v-model="searchQuery" placeholder="搜索合同名称/编号" prefix-icon="el-icon-search" clearable>
            <el-button icon="el-icon-refresh"></el-button>
          </el-input>
        </div>
      </div>

      <!-- Table -->
      <el-table @row-dblclick="handleView" scrollbar-always-on v-loading="loading" :data="dataSource" style="width: 100%;" :height="'calc(100vh - 480px)'" :header-cell-style="{ background: '#F5F7FA' }">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="60" label="#"></el-table-column>

        <el-table-column prop="taskTypeName" label="任务类型" min-width="200"></el-table-column>
        <el-table-column prop="supplierClassifyName" label="客户分类" min-width="120"></el-table-column>
        <el-table-column prop="followTypeName" label="经营类型" min-width="120"></el-table-column>
        <el-table-column prop="userName" label="客户经理" min-width="120"></el-table-column>
        <el-table-column prop="planNum" label="计划拜访客户数" min-width="180">
          <template #default="{row}">
            {{ row.jzgVisitorProgramDetailVoList && row.jzgVisitorProgramDetailVoList.length || '-' }}
          </template>

        </el-table-column>
        <el-table-column prop="visitedNum" label="已拜访客户数" min-width="180"></el-table-column>
        <el-table-column prop="uncompleteNum" label="未完成客户数" min-width="180"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="180"></el-table-column>
        <el-table-column prop="userName" label="创建人" min-width="120"></el-table-column>        
        <el-table-column prop="programDate" label="创建时间" min-width="160">
          <template #default="scope">
           <span>{{scope.row.programDate ? moment(scope.row.programDate).format('YYYY-MM-DD HH:mm:ss') : '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="120">
          <template #default="scope">
          <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
          <el-divider direction="vertical" />
          <el-link :underline="false" type="primary" @click="handleDelete(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

 
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page.sync="queryParams.pageNum"
          v-model:limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
    </el-card>
    <contactDrawer ref="contactDrawer"></contactDrawer>
    <addForm ref="modelForm" @ok="getList"></addForm>
    <customDialog ref="customDialog" @ok="customerOk"></customDialog>
    <selectMaterialForm ref="selectMaterialForm"></selectMaterialForm>
    <selectClueForm ref="selectClueForm" @ok="clueOk"></selectClueForm>
  </div>
</template>
  
  <script>
  import customDialog from '@/views/goods/customer/modules/custom-dialog.vue';
import contactDrawer from './modules/contactDrawer.vue';
import addForm from './modules/addForm.vue';
import listMixin from '@/mixins/listMixin';
import selectMaterialForm from '@/views/goods/quote/modules/selectMaterialForm';
import selectClueForm from '@/views/goods/clue/modules/clue-dialog.vue';
import contract from '@/api/goods/contract';

export default {
  name: 'ContractList',
  components: {
    contactDrawer,
    addForm,
    customDialog,
    selectMaterialForm,
    selectClueForm
  },
  mixins: [listMixin],

  data() {
    return {
      activeTab: 'all',
      urls: {
        list: '/order/visitorProgram/list',
        delete: '/order/visitorProgram'
      },
      queryParams:{},
      searchQuery: '',
      currentPage: 1,
      pageSize: 20,
      total: 5,
      statistics: [
        { title: '今日新增', number: '-', amount: '¥ -' },
        { title: '本月新增', number: '-', amount: '¥ -' },
        { title: '全部', number: '-', amount: '¥ -' }
      ],
    };
  },
  created() {
    this.getUserNotPermission()
    this.getContractCount()
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleView(row) {
      this.$refs.contactDrawer.detail(row);
    },
    handleAdd() {
      this.$refs.modelForm.add();
      // this.$refs.modalDialog.open()
    },
    
    showCustomer() {
      this.$refs.customDialog.open();
    },
    showClue() {
      this.$refs.selectClueForm.open();
    },
    clueOk(rows) {
      let clue = rows[0];

      this.queryParams.clueName = clue.clueName;
      this.queryParams.clueId = clue.id;
      this.getList();
    },
    customerOk(rows) {
      let customer = rows[0];
      this.queryParams.supplierId = customer.id;
      this.queryParams.supplierName = customer.supplierName;
      this.getList();
    },
      clear(type) {
      this.queryParams[type + 'Id'] = '';
      this.queryParams[type + 'Name'] = '';
      this.getList();
    },
    // 查询统计
    getContractCount(){
      contract.getContractCount().then(res=>{
        if(res.code == 200) {
           this.statistics = [
        { title: '今日新增', number: (res.data.dayCount || 0), amount: '¥ ' + (res.data.dayAmount || '-')  },
        { title: '本月新增', number: (res.data.monthCount || 0), amount: '¥ ' +( res.data.monthAmount || '-') },
        { title: '全部', number:( res.data.allCount || 0), amount: '¥ ' + (res.data.allAmount || '-') }
      ]
         }else{
           this.$modal.msgError(res.msg)
         }
      }).catch((err)=>{
           console.log('err >>',err) 
      })
    }
  },
};
</script>
  
  <style>
.contract-list {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.tabs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding-right: 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  padding-left: 16px;
}

.contract-tabs {
  flex: 1;
}

.el-tabs__header {
  margin: 0;
}

.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #dcdfe6;
}

.el-tabs__item {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  color: #606266;
  padding: 0 20px;
}

.el-tabs__item.is-active {
  color: #2468f2;
  font-weight: 500;
}

.el-tabs__active-bar {
  height: 2px;
  background-color: #2468f2;
}

.new-button {
  background-color: #2468f2;
  border-color: #2468f2;
  position: absolute;
  right: 60px;
}

.new-button:hover {
  background-color: #1d54cc;
  border-color: #1d54cc;
}

.statistics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(rgb(230, 238, 255) 0%, rgb(249, 251, 255) 100%);
  background-image: linear-gradient(rgb(230, 238, 255) 0%, rgb(249, 251, 255) 100%);
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}

.stat-content {
  padding: 16px;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.stat-amount {
  font-size: 14px;
  color: #2468f2;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}

.left-filters {
  display: flex;
  gap: 8px;
}

.left-filters .el-select {
  width: 160px;
}

.right-filters .el-input {
  width: 300px;
}

.el-table {
  margin-top: 16px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  padding: 12px 0;
}

.el-table td {
  padding: 12px 0;
}

.pagination-wrapper {
  margin-top: 16px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.total-count {
  margin-right: 16px;
  color: #606266;
}

.el-pagination {
  margin: 0 16px;
}

.page-size-select {
  margin-left: 16px;
  width: 120px;
}
</style>